<template>
    <view class="">
		<!-- 添加笔记 -->
		<hx-navbar
		    :fixed="true"
		    transparent="show"
			:back="false" 
			:rightSlot="false"
		    :background-color="[239, 61, 34]"
			>
			<block slot="left">
				<view class="ring" style="margin-left: 8px;" @click="backPage">
					<uni-icons type="arrowleft" color="#ffffff" size='20'></uni-icons>
				</view>
			</block>
			<view class="ctn">
				<view class="tabs-box">
					<text class="cffff f32 font_bold" style="margin-left: 228rpx;">笔记管理</text>
				</view>
				
				<view class="leftBox f28 cffff" @click="navToPage(`/pages/article/article-add`,'')">
					添加
				</view>
				<!-- #ifdef MP -->
				<view class="jrNull"></view>
				<!-- #endif  -->
			</view>
		</hx-navbar>
		<!-- 笔记列表 -->
		<wfalls-flow :list='list' class='bg-color-grey' ref="wfalls" @finishLoad="getLoadNum"> </wfalls-flow>
    </view>
</template>

<script>
export default {
    data(){
        return{
            list: [], //列表数据
        };
    },
    components:{
        
    },
	onLoad(){
		this.init();
	},
    mounted(){

    },
    methods:{
		//返回
		backPage(){
			uni.navigateBack();
		},
		//获取加载数据集情况
		getLoadNum(num) {
			console.log('共加载了:' + num);
			!this.isNewRenderDone && uni.hideLoading()
			this.isNewRenderDone = true
		},
		//加载数据
		init() {
			for (let i = 0; i < 10; i++) {
				let title = '我是文章标题';
				if ((i % 2 != 0 && i != 9) || i == 2 || i == 8) {
					title = '我是文章标题我是文章标题我是文章标题';
				}
				this.list.push({
					id: new Date(),
					image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583671469410&di=6bdb6526f0117380db303ac285c94974&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fd%2Fdc%2F0f45274990.jpg',
					isLike: false,
					title: title,
					avatar: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eo0lx1gO185kJIvuNvicG0lnUFyDOX6L0Ce5icEGoXLMECSTpFtFyRrDjgHyQATQ0IRibmUzAzqrQBSg/132',
					userName: '山的那边、海的这边',
				});
			}
			console.log('this.list', this.list);
		},
    },
}
</script>

<style lang="scss">
.ctn{
	width: 100%;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	align-items: center;
	.leftBox{
		display: flex;
		width: 30px;
		justify-content: space-between;
		flex: none;
		margin: 0 8px;
		align-items: center;
	}
	.jrNull{
		width: 95px;
		flex: none;
	}
}
</style>
